<template>
    <d2-container :class="{'page-compact':crud.pageOptions.compact}">
        <d2-crud-x
                ref="d2Crud"
                v-bind="_crudProps"
                v-on="_crudListeners"
                @caseTest="caseTest"
        @showCaseResult="showCaseResult">

            <div slot="header">
                <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
                <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
                <el-button size="small" type="danger" @click="batchDelete"><i class="el-icon-delete"></i> 批量删除</el-button>
                <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
            </div>
            <span slot="PaginationPrefixSlot" class="prefix" >
                <el-button class="square" size="mini" title="批量删除"   @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length===0"  />
            </span>
        </d2-crud-x>

<el-drawer :visible.sync="drawer" :size="700">
      <div slot="title">
        <span>测试结果</span>
        <el-tag size="small" style="margin-left: 10px">当前用例：{{
          apiRow.case_name
        }}</el-tag>
      </div>
      <case-result
        style="margin-top: 80px; margin-left: 10px"
        :caseRow="apiRow"
      >
      </case-result>
    </el-drawer>
    </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import CaseResult from '@/views/api_testcase/case_result/index'
export default {
  name: 'Api_testcase',
  mixins: [d2CrudPlus.crud],
  components: { CaseResult },
  data () {
    return {
      drawer: false,
      apiRow: {}
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      return api.AddObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    caseTest ({ row }) {
      const that = this
      api.caseTest(row.id).then((res) => {
        that.$message.success('测试成功')
      })
    },
    showCaseResult (scope) {
      this.drawer = true
      this.apiRow = scope.row
    }
  }
}
</script>
